<template>
	<div class="orderCenter-Main">
		<Table :columns="columns" :data="tableData"></Table>
		<div style="text-align:center;">
			<Page :total="countNum" show-elevator show-total :page-size="pagesize" @on-change="getList" style="padding:35px 0" />
		</div>
	</div>
</template>

<script>
	import '@/api/index.js'
	import Util from '@/utils/index'
	export default {
		name: 'orderCenter',
		data () {
			return {
				pages: 1,
				pagesize: 10,
				orderDate: '',
				orderList: [],
				payState: '',
				countNum: 0,
				columns: [{
						type: 'index',
						title: '序列',
						width: 100,
						align: 'center'
					},
					{
						title: '订单编号',
						key: 'bindCode',
						width: 200
					},
					{
						title: '商品名称',
						key: 'productName'
					},
					{
						title: '数量',
						key: 'productCount',
						width: 100,
						render: (h, params) => {
							let count = (params.row.productName).split(' | ')
							return h('div', count.length)
						}
					},
					{
						title: '订单时间',
						key: 'date',
						width: 170
					},
					// {
					// 	title: '订单金额',
					// 	key: 'money',
					// 	width: 140
					// },
					{
						title: '合同',
						key: 'contract',
						width: 140,
						render: (h, params) => {
							if (params.row.contract === '' || params.row.contract === null) {
								return h('div', '未上传')
							} else {
								return h('div', [
									h('a', {
										attrs: {
											href: params.row.contract,
											target: '_blank'
										}
									}, '下载')
								])
							}
						}
					},
					{
						title: '交易状态',
						key: 'orderState',
						width: 120,
						render: (h, params) => {
							let temp = params.row.orderState
							if (temp !== '' && temp !== null) {
								if (temp === 1) {
									temp = '等待交易'
								} else if (temp === 2) {
									temp = '成交'
								} else if (temp === 3) {
									temp = '作废'
								}
							}
							return h('div', temp)
						}
					},
					{
						title: '操作',
						key: 'action',
						width: 240,
						align: 'center',
						render: (h, params) => {
							let btnText = ''
							if (params.row.contract === '' || params.row.contract === null) {
								btnText = '上传合同'
							} else {
								btnText = '重新上传'
							}
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									on: {
										click: () => {
											this.deal(params.row, 2)
										}
									}
								}, '成交'),
								h('Button', {
									props: {
										type: 'warning',
										size: 'small'
									},
									style: {
										marginLeft: '20px'
									},
									on: {
										click: () => {
											this.deal(params.row, 3)
										}
									}
								}, '作废'),
								h('Upload', {
									props: {
										action: sessionStorage.uploadUrl + '/files/v2/upload',
										showUploadList: false,
										onSuccess: this.handleSuccess,
										headers: {
											'Authorization': Util.getToken()
										}
									},
									style: {
										display: 'inline-block',
										marginLeft: '20px'
									}
								}, [
									h('Button', {
										props: {
											type: 'warning',
											size: 'small'
										},
										on: {
											click: () => {
												this.setUploadRow(params.row)
											}
										}
									}, btnText)
								])
							])
						}
					}
				],
				tableData: [],
				uploadRow: {}
			}
		},
		methods: {
			// 获取文章列表
			getList (page) {
				this.pages = page
				this.$api.get(0, '/shop/v2/order/page', {
					state: 0,
					page: this.pages,
					limit: this.pagesize
				}, r => {
					if (r.data.code === 0) {
						this.tableData = r.data.data.data
						this.countNum = r.data.data.total
					}
				})
			},
			// 改变状态
			deal (row, flag) {
				if (row.contract !== '' && row.contract !== null && flag === 3) {
					this.$Message.error('已上传合同，禁止作废')
					return false
				}
				this.$api.put(0, '/shop/v2/order', {
					oId: row.oid,
					orderState: flag,
					contract: ''
				}, r => {
					if (r.data.code === 0) {
						this.$Message.success('操作成功')
						this.getList(1)
					} else {
						this.$Message.error('操作失败')
					}
				})
			},
			// 要上传的数据行
			setUploadRow (row) {
				this.uploadRow = row
			},
			// 上传成功
			handleSuccess (res, file) {
				this.$api.put(0, '/shop/v2/order', {
					oId: this.uploadRow.oid,
					orderstate: '',
					contract: res.data
				}, r => {
					if (r.data.code === 0) {
						this.$Message.success('上传成功')
						this.getList(1)
					} else {
						this.$Message.error('上传失败')
					}
				})
			}
		},
		mounted () {
			this.getList(1)
		}
	}
</script>

<style lang="scss">

</style>
